<style lang="scss" scoped>
@import '../../styles/common/loading.less';
.container{
    border: none !important;
    margin-top: 4px;
}
.el-col-offset-1 {
    margin-left: 0%;
}
.button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

}
.col_a {
    margin-left: 2%;
}
.el-card {
    height: 200px;
}

.el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
}
</style>
<template>
  <div>
      <div class="container">
          <el-form :model="formInline" class="select-submit-form" ref="formInline">
              <el-row type="flex">
                  <el-col :span="8">
                      <el-form-item label="大病赔案号" prop="caseNo">
                        <el-input  placeholder="请输入赔案号" v-model="formInline.caseNo"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="被保险人" prop="insuredName">
                          <el-input  placeholder="请输入被保险人" v-model="formInline.insuredName"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="证件号" prop="documentNo">
                          <el-input  placeholder="请输入证件号" v-model="formInline.documentNo"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row type="flex">
                  <el-col :span="8">
                    <el-form-item label="任务状态" prop="taskState">
                      <el-select  v-model="formInline.taskState" >
                        <el-option label="待申请" value="01"></el-option>
                        <el-option label="已处理" value="03"></el-option>
                        <el-option label="已退回" value="05"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="24">
                    <div class="select-btn-group">
                      <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                      <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                    </div>
                  </el-col>
              </el-row>
          </el-form>
          <el-table
              :data="tableData"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin: 30px 0;border: 1px solid #d6d9d8;"
              v-loading="loading"
              element-loading-text="Loading....."
          >
              <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
              <el-table-column prop="" label="大病赔案号" width="165"  align="center">
                  <template slot-scope="scope" >
                      <a href="#" style="color: #409EFF" @click="toTaskDetailPage(scope.row)">{{scope.row.caseNo}}</a>
                  </template>
              </el-table-column>
              <el-table-column prop="policyNo" label="保单号" align="center" width="165"></el-table-column>
              <el-table-column prop="socialSecurityNo" label="社/医保号"  align="center"></el-table-column>
              <el-table-column prop="insuredName" label="被保险人"  align="center"></el-table-column>
              <el-table-column prop="documentNo" label="证件号" align="center" width="165"></el-table-column>
              <el-table-column prop="flowInTime" label="流入时间"  align="center" width="150"></el-table-column>
              <el-table-column prop="taskState" label="任务状态" :formatter="taskStateFormat" align="center"></el-table-column>
          </el-table>
          <div class="pagination">
                <div v-show=" pagination.totalPage>0" class="index_page">
                    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                  :page-sizes="[10, 25, 50, 100, 500, 1000, 5000]"
                                  :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                  @size-change="handleSizeChange" @current-change="queryFun">
                    </el-pagination>
                </div>
          </div>
      </div>
  </div>
</template>
<script>
import {queryCancelTask} from '@/api/baseDate'
export default {
name: 'caseCancel',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            taskState:[],
            item:0,
            formInline: {
                taskState: '01'
            },
            tableData: [],
            taskApplicant:{},
            state:0,
        }
    },
    created() {
    },
    methods: {
        // 改变当前页条数事件
        handleSizeChange(pageSize){ 
            this.pagination.rowsNumber=pageSize
            this.queryCancelTaskList();
        },
        // 改变当前页事件
        queryFun(pageNum){ 
            this.pagination.currentPage=pageNum
            this.queryCancelTaskList();
        },
        // 查询
        handleSearch(){
            this.queryCancelTaskList();
        },
        // 重置
        handleReset(formName){
             this.$refs[formName].resetFields();
        },
        // 状态转换
        taskStateFormat(row, column) {
            let taskState = row.taskState
            if (taskState === '05') {
              return '已退回'
            } else if (taskState === '03') {
              return '已处理'
            } else {
              return '待申请'
            }
        },
        // 查询案件列表
        queryCancelTaskList() {
            var data = {
                ...this.formInline,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.rowsNumber,
                comCode:Cookies.get("makeCom"),
                taskType: 'cancel'
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryCancelTask(data)
                .then(res => {
                    this.loading = false;
                    if(res){
                        this.tableData = res.data.list;
                        this.pagination.totalPage=res.data.total;
                    }else{
                        this.$message.error('系统异常'); 
                    }
                })
        },
        // 跳转详情页面
        toTaskDetailPage(row){
          if(this.formInline.taskState == '01'){
              this.$router.push({
                  name: 'caseCancelDetail',
                  query: {
                      taskApplicant: JSON.stringify(row),
                      item: JSON.stringify(this.item),
                  }
              })
          }else{
            const datas = {
                taskId: row.taskId,
                taskState: row.taskState,
                policyNo: row.policyNo,
                insuredName: row.insuredName,
                socialSecurityNo: row.socialSecurityNo,
                documentTypeName: row.documentTypeName,
                documentNo: row.documentNo,
                cancelReasonName: row.cancelReasonName,
                comCode: row.comCode
            }
            this.$router.push({
                name: 'caseCancelDetailSee', 
                params: datas
            })

          }
        }
    }
}
</script>